<template>
  <li @click="jumpPlay(item.id)">
    <div>
      <h3>{{ item.name }}</h3>
      <div class="album">
        <span class="sq"></span>
        <div class="info">
          <span>
            <span
              class="artist"
              v-for="artist in item.song.artists"
              :key="artist.id"
              >{{ artist.name }}</span
            >
          </span>
          <span>
            <span>{{ item.song.album.name }}</span>
          </span>
        </div>
      </div>
    </div>
    <span v-if="item.id != songId" class="bgPlay"></span>
    <div v-else class="play-pause">
      <span :class="{ running: playing, pause: !playing }"></span>
      <span :class="{ running: playing, pause: !playing }"></span>
      <span :class="{ running: playing, pause: !playing }"></span>
    </div>
  </li>
</template>

<script>
export default {
  props: {
    item: Object,
    songId: Number,
    playing: Boolean,
  },
  data() {
    return {
      playIcon: true,
    };
  },
  methods: {
    jumpPlay(id) {
      this.$emit("play-audio", id);
    },
  },
};
</script>

<style lang="less" scoped>
@keyframes myplay {
  from {
    transform: scaleY(0.2);
  }
  to {
    transform: scaleY(1);
  }
}
li {
  text-align: left;
  display: flex;
  justify-content: space-between;
  padding: 5px;
  border-bottom: 1px solid #ebebeb;
  line-height: 3vh;
  height: 8vh;
  margin-top: 10px;
  .bgPlay {
    background: url('../assets/music.png') no-repeat -48px 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-self: center;
    transform: scale(0.6);
  }

  .play-pause {
    display: flex;
    align-items: center;
    margin-right: 13px;
    span {
      width: 4px;
      height: 20px;
      background-color: green;
      margin-left: 2px;
      position: relative;
      display: block;
      transform-origin: bottom;
      animation: myplay 0.9s linear infinite alternate;
      &.running {
        animation-play-state: running;
      }
      &.pause {
        animation-play-state: paused;
      }
    }
    span:nth-of-type(1) {
      animation-delay: -0.9s;
    }
    span:nth-of-type(2) {
      animation-delay: -0.6s;
    }
    span:nth-of-type(3) {
      animation-delay: -0.3s;
    }
  }
}
h3 {
  font-size: 14px;
  width: 70vw;
  margin-bottom: 5px;
  margin-left: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.album {
  display: flex;
  .info {
    font-size: 12px;
    display: flex;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 70vw;

    .artist {
      &::after {
        margin: 0 5px;
        content: "/";
      }
      &:last-of-type {
        &::after {
          content: "-";
        }
      }
    }
    span {
      color: #888888;
    }
  }
  .sq {
    background: url("../assets/music.png") no-repeat 0 0;
    width: 24px;
    height: 16px;
    display: block;
    margin-right: 5px;
    transform: scale(0.6);
  }
}
</style>